<template>
  <div
      class="floor"
      :style="{
      bottom: (bottomOffset + 20) + 'px',
      transform: hide ? 'translateX(-120%)' : 'translateX(0)',
      transition: 'transform 0.3s ease'
    }"
  >
    <!-- 向上滚动箭头 -->
    <div class="arrow up" @click="scrollUp">
      <svg width="18" height="18" viewBox="0 0 18 18" class="arrow-svg">
        <polyline points="3,12 9,6 15,12" fill="none" stroke="#DADDE2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>

    <!-- 楼层列表 -->
    <div class="floor-list" ref="floorListRef">
      <div
          v-for="(item, index) in floorList"
          :key="index"
          class="floor-item"
          :class="{ active: index === currentIndex }"
          @click="handleItemClick(index, item)"
      >
        {{ item }}
      </div>
    </div>

    <!-- 向下滚动箭头 -->
    <div class="arrow down" @click="scrollDown">
      <svg width="18" height="18" viewBox="0 0 18 18" class="arrow-svg">
        <polyline points="3,6 9,12 15,6" fill="none" stroke="#DADDE2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>
</template>

<script>
import { FLOOR_DATA } from "@/utils/getDataFromUrl.js"
export default {
  name: "FloorSwitch",
  props: {
    // 底部偏移量
    bottomOffset: {
      type: Number,
      default: 300
    },
    // 是否隐藏
    hide: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 默认楼层列表
      floorList: ["F4", "F3", "F2", "F1"],
      currentIndex: -1, // 初始不高亮
      // 缓存已加载的楼层数据
      floorCache: {}
    };
  },
  methods: {
    // 向上滚动
    scrollUp() {
      // 切换到上一个楼层
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.loadFloorData(this.floorList[this.currentIndex]);
      }
    },

    // 向下滚动
    scrollDown() {
      // 切换到下一个楼层
      if (this.currentIndex < this.floorList.length - 1) {
        this.currentIndex++;
        this.loadFloorData(this.floorList[this.currentIndex]);
      }
    },

    // 处理点击楼层项
    handleItemClick(index, item) {
      this.currentIndex = index;
      // 触发楼层加载
      this.loadFloorData(item);
    },

    // 加载楼层数据（带缓存）
    async loadFloorData(item) {
      // 先检查缓存
      if (this.floorCache[item]) {
        this.$emit("floor-change", {
          floorName: item,
          geojsonData: this.floorCache[item]
        });
        return;
      }

      // ✅ 直接从 FLOOR_DATA 获取数据
      const cachedData = FLOOR_DATA[item];
      // ✅ 检查数据是否存在
      if (!cachedData) {
        console.error(`缓存中未找到 ${item} 数据`);
        this.$emit("floor-load-error", { floorName: item, error: "数据未加载" });
        return;
      }

      // ✅ 触发事件并缓存数据
      this.floorCache[item] = cachedData.data;

      this.$emit("floor-change", {
        floorName: item,
        geojsonData: cachedData.data
      });

      this.currentIndex = this.floorList.indexOf(item);
    },
    // 新增：外部可调用以高亮当前楼层
    syncCurrentFloor(floorName) {
      const idx = this.floorList.indexOf(floorName);
      if (idx !== -1) {
        this.currentIndex = idx;
      }
    }
  }
};
</script>

<style scoped>
.floor {
  position: fixed;
  left: 10px;
  bottom: 0;
  width: 55px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 10px 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #e0e0e0;
}

.arrow {
  width: 22px;
  height: 22px;
  margin: 8px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.floor-list {
  overflow-y: auto;
  max-height: 250px;
  -webkit-overflow-scrolling: touch; /* 移动端滚动优化 */
}

.floor-item {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  text-align: center;
  line-height: 40px;
  margin: 1px 0;
  font-size: 16px;
  color: #333;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.floor-item.active {
  background: #4187ff;
  color: #fff;
}

/* 移动端适配 */
@media screen and (max-width: 750px) {
  .floor {
    width: 50px;
    border-radius: 12px;
    padding: 8px 0;
  }

  .arrow {
    width: 20px;
    height: 20px;
    margin: 6px 0;
  }

  .arrow-svg {
    width: 20px;
    height: 20px;
  }

  .floor-item {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    margin: 1px 0;
  }

  .floor-list {
    max-height: 220px;
  }
}
</style>
